import React from 'react'
import logo from './logo.jpg'
import { Layout, Menu, Breadcrumb } from 'antd';
import  {withRouter} from 'react-router-dom'
import {adminRoute} from '../../routes/index'
const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;
const  menu= adminRoute.filter(route=>route.isShow)
function Index(props) {
    return (
        <Layout>
            <Header className="header" style={{backgroundColor:'blue'}}>
                <div className="logo"  />
                <img src={logo} alt="logo" style={{height:"64px"}}/>
                {/*<Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']} >*/}
                {/*    <Menu.Item key="1">nav 1</Menu.Item>*/}
                {/*    <Menu.Item key="2">nav 2</Menu.Item>*/}
                {/*    <Menu.Item key="3">nav 3</Menu.Item>*/}
                {/*</Menu>*/}
            </Header>
            <Layout>
                <Sider width={200} className="site-layout-background">
                    <Menu
                        mode="inline"
                        defaultSelectedKeys={['1']}
                        defaultOpenKeys={['sub1']}
                        style={{ height: '100%', borderRight: 0 }}
                    >
                        {menu.map(m=>{
                            return (<Menu.Item key={m.path} icon={m.icon} onClick={p=>{props.history.push(p.key)}}>{m.title}</Menu.Item>)
                        })}
                    </Menu>

                </Sider>
                <Layout style={{ padding: '16px' }}>
                    {/*<Breadcrumb style={{ margin: '16px 0' }}>*/}
                    {/*    <Breadcrumb.Item>Home</Breadcrumb.Item>*/}
                    {/*    <Breadcrumb.Item>List</Breadcrumb.Item>*/}
                    {/*    <Breadcrumb.Item>App</Breadcrumb.Item>*/}
                    {/*</Breadcrumb>*/}
                    <Content
                        className="site-layout-background"
                        style={{
                            padding: 24,
                            margin: 0,
                            minHeight: 280,
                            background:"#fff"
                        }}
                    >
                        {props.children}
                    </Content>
                </Layout>
            </Layout>
        </Layout>
    )
}



export default withRouter(Index);
